<template>
  <div class="wallet">
    <div class="close-content" @click="goBack">
      <span class="icon iconfont close">&#xe748;</span>
    </div>
    <div class="page-name">balance</div>
    <div class="page-price"><span class="price-unit">$</span>{{wData.balance}}</div>
    <div class="list-btn">Balance Details</div>
    <div class="btn-item-2" @click="goToPayment">Add Credit</div>
    <div class="btn-item-1" @click="goToWithdraw">Withdrawal</div>
    <div class="xy-btn" @click="goToAgree">《Terms of Service》</div>
  </div>
</template>

<script>
export default {
  name: "wallet",
  data() {
    return {
      wData: {
        id: 10,
        name: "",
        img: null,
        desc: null,
        balance: 0,
        voucher: 0,
        commission: 0,
        createTime: "",
        createBy: "",
        walletLogList: [],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this._showLoading();
      this.$http
        .get(`api/v1/wallet`)
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            this.wData = res.data.resultData
          } else {
            this._showToast(res.data.message);
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },
    goToAgree(item) {
      this.$router.push({
        name: "agreement",
        query: {
          id: 25,
          title: "Cash withdrawal agreement",
        },
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    goToPayment() {
      this.$router.push({
        name: "payment",
      });
    },
    goToWithdraw() {
      this.$router.push({
        name: "withdraw",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet {
  box-sizing: border-box;
  .close-content {
    width: 40px;
    height: 40px;
    // position: fixed;
    top: calc(0px);
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .close {
      color: var(--text-color);
      font-size: 22px;
    }
  }
  .page-name {
    margin-top: 110px;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
  }
  .page-price {
    font-size: 42px;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    .price-unit {
      font-size: 18px;
      margin-right: 3px;
    }
  }
  .list-btn {
    width: 120px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #00dcab;
    opacity: 0.85;
  }
  .btn-item-2 {
    width: 318px;
    height: 46px;
    background: #00dcab;
    opacity: 1;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
  }
  .btn-item-1 {
    width: 318px;
    height: 46px;
    border: 1px solid #00dcab;
    background: var(--content-bc);
    opacity: 1;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #00dcab;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }
  .xy-btn {
    position: fixed;
    bottom: 60px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    font-size: 16px;
    font-weight: 400;
    color: #00dcab;
  }
}
</style>